<template>
  <div class="menu">
    <div class="demo-inner-divider">基础用法</div>
    <e-menu active-name="1-2" :open-names="['1']" accordion>
      <e-submenu name="1">
        <template #title>
          <e-icon type="apps" />
          Navigation One
        </template>
        <e-menuGroup title="Item 1">
          <e-menuItem name="1-1">Option 1</e-menuItem>
          <e-menuItem name="1-2">Option 2</e-menuItem>
        </e-menuGroup>
        <e-menu-group title="Item 2">
          <e-menuItem name="1-3">Option 3</e-menuItem>
          <e-menuItem name="1-4">Option 4</e-menuItem>
        </e-menu-group>
      </e-submenu>
      <e-submenu name="2">
        <template #title>
          <e-icon type="no-data" />
          Navigation Two
        </template>
        <e-menuItem name="2-1">Option 5</e-menuItem>
        <e-menuItem name="2-2">Option 6</e-menuItem>
        <e-submenu name="3">
          <template #title>Submenu</template>
          <e-menuItem name="3-1">Option 7</e-menuItem>
          <e-menuItem name="3-2">Option 8</e-menuItem>
        </e-submenu>
        <e-submenu name="5">
          <template #title>Submenu</template>
          <e-menuItem name="5-1">Option 7</e-menuItem>
          <e-menuItem name="5-2">Option 8</e-menuItem>
        </e-submenu>
      </e-submenu>
      <e-submenu name="4">
        <template #title>
          <e-icon type="enclosure" />
          Navigation Three
        </template>
        <e-menuItem name="4-1">Option 9</e-menuItem>
        <e-menuItem name="4-2">Option 10</e-menuItem>
        <e-menuItem name="4-3">Option 11</e-menuItem>
        <e-menuItem name="4-4">Option 12</e-menuItem>
      </e-submenu>
      <e-submenu name="6">
        <template #title>
          <e-icon type="enclosure" />
          产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称
        </template>
        <e-menuItem name="6-1">产品1</e-menuItem>
        <e-menuItem name="6-2">产品2</e-menuItem>
        <e-menuItem name="6-3">产品3</e-menuItem>
        <e-menuItem name="6-4">产品4</e-menuItem>
      </e-submenu>
    </e-menu>
    <menu-md class="markdown-body"></menu-md>
  </div>

</template>
<script>
import menuMd from '../../docs/menu.md'
export default {
  name: 'DemoMenu',
  components: {
    menuMd,
  },
}
</script>
<style lang="less" scoped>
</style>
